.box {
  padding: 0;

  .card {
    width: 100%;
    height: calc(100vh - 60px);
    .card-box {
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: hidden;
      background-color: #000;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
      flex: 1;
    }

    .menu {
      position: absolute;
      top: 50%;
      right: 50px;
      display: flex;
      flex-direction: column;
      transform: rotateY(-50%);

      ul {
        position: relative;
        width: 100px;
        height: 50px;
        background: transparent;
        border-radius: 8px;
        margin: 20px 0;
        overflow: hidden;
        cursor: pointer;


        &::before, &::after {
          z-index: 1;
          position: absolute;
          top: -50%;
          left: -50%;
          content: '';
          width: 100%;
          height: 100%;
          background: linear-gradient(#00c2ff, #45f793);
          animation: animate 5s linear infinite;
          transform-origin: bottom right;
        }

        &::after {
          animation-delay: -3s;
        }

        @keyframes animate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        li {
          z-index: 2;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          inset: 2px;
          background: #000000;
          border-radius: 8px;

          &:hover {
            background: #004141;
          }

          span {
            font-size: $base-normal-font-size;
            color: #69c9cb;
          }
        }

      }
    }

    .footer {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, -20%);

      img {
        width: 60px;
        cursor: pointer;
      }
    }

  }
}
.slide-down-enter-active, .slide-down-leave-active {
  transition: transform .5s;
}
.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-100%);
}




